<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于我 - 我的个人博客</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <div class="container">
            <h1>我的博客</h1>
            <nav>
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="blog.html">文章</a></li>
                    <li><a href="about.html" class="active">关于我</a></li>
                    <li><a href="contact.html">联系方式</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main class="container about-page">
        <h2 class="page-title">关于我</h2>
        
        <section class="about-intro">
            <div class="about-image">
                <img src="images/profile.jpg" alt="我的照片">
            </div>
            <div class="about-content">
                <h3>你好，我是[你的名字]</h3>
                <p class="about-tagline">网站开发者 | 博客作者 | 技术爱好者</p>
                <p>欢迎来到我的个人博客！我是一名热爱技术和分享的开发者。在这里，我会分享我的技术心得、生活感悟以及各种有趣的经历。</p>
                <p>我相信知识是需要不断积累和分享的，希望通过这个博客平台，能够记录下我的成长历程，同时也希望能够帮助到其他有相同兴趣的朋友。</p>
                <div class="social-links">
                    <a href="#" class="social-link">微博</a>
                    <a href="#" class="social-link">知乎</a>
                    <a href="#" class="social-link">GitHub</a>
                </div>
            </div>
        </section>

        <section class="about-skills">
            <h3>我的技能</h3>
            <div class="skills-container">
                <div class="skill">
                    <h4>前端开发</h4>
                    <div class="skill-bar">
                        <div class="skill-level" style="width: 90%;"></div>
                    </div>
                    <p>HTML, CSS, JavaScript, React</p>
                </div>
                <div class="skill">
                    <h4>后端开发</h4>
                    <div class="skill-bar">
                        <div class="skill-level" style="width: 80%;"></div>
                    </div>
                    <p>Node.js, Express, Python, Django</p>
                </div>
                <div class="skill">
                    <h4>数据库</h4>
                    <div class="skill-bar">
                        <div class="skill-level" style="width: 75%;"></div>
                    </div>
                    <p>MySQL, MongoDB, PostgreSQL</p>
                </div>
                <div class="skill">
                    <h4>其他技能</h4>
                    <div class="skill-bar">
                        <div class="skill-level" style="width: 85%;"></div>
                    </div>
                    <p>Git, Docker, AWS, UI/UX设计</p>
                </div>
            </div>
        </section>

        <section class="experience">
            <h3>工作经历</h3>
            <div class="timeline">
                <div class="timeline-item">
                    <div class="timeline-date">2020 - 至今</div>
                    <div class="timeline-content">
                        <h4>高级Web开发工程师</h4>
                        <p class="company">某科技公司</p>
                        <p>负责公司主要产品的前端开发工作，使用React构建用户界面，优化用户体验。</p>
                    </div>
                </div>
                <div class="timeline-item">
                    <div class="timeline-date">2018 - 2020</div>
                    <div class="timeline-content">
                        <h4>全栈开发工程师</h4>
                        <p class="company">某创业公司</p>
                        <p>参与公司产品从零到一的全过程开发，负责前端界面设计和后端API开发。</p>
                    </div>
                </div>
                <div class="timeline-item">
                    <div class="timeline-date">2016 - 2018</div>
                    <div class="timeline-content">
                        <h4>前端开发实习生</h4>
                        <p class="company">某互联网公司</p>
                        <p>参与公司网站的前端开发工作，学习并实践HTML、CSS和JavaScript技术。</p>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <div class="container">
            <p>&copy; 2023 我的个人博客. 保留所有权利.</p>
            <div class="social-links">
                <a href="#" class="social-link">微博</a>
                <a href="#" class="social-link">知乎</a>
                <a href="#" class="social-link">GitHub</a>
            </div>
        </div>
    </footer>

    <script src="js/script.js"></script>
</body>
</html> 